<template>
    <div class="top_nav flex">
        <!-- top搜索框 -->
        <!-- <div :class="hidden ? 'fix' : ''"> -->
        <!--  -->
        <div class="top_input flex ">
            <div class="top_search"></div>
            <div class="input_box">
                <van-icon name="search" />
                搜索商品，共123456件
            </div>
        </div>
        <!-- 分类搜索 -->
        <div>
            <van-tabs v-model:active="active" scrollspy sticky>
                <van-tab v-for="item in topNavlist" :key="item.id" :title="item.name">
                </van-tab>
            </van-tabs>
        </div>
        <!-- </div> -->
        <!-- 轮播 图区域 -->
        <div class="top_swiper">
            <van-swipe class="my-swipe" lazy-render :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="item in focusList" :key="item.id">
                   <router-link to="/detail">
                    <img :src="item.picUrl">
                   </router-link> 
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 路由展示区域 -->
        <route-view></route-view>

        <!-- 3条保障服务 -->
        <div class="content_three ">
            <ul class="flex">
                <li v-for="item in policyDescList" :key="item.id">
                    <!-- 图标样式从网站引入 -->
                    <img :src="item.icon" width="16px" alt="">
                    <a href="#">
                        {{ item.desc }}</a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import homeApi from '@/api/home'
import { ref, onMounted, computed } from 'vue'
import router from '@/router'
import { throttle } from 'lodash'


const hidden = ref(1)
const pageSCroll = throttle(() => {
    window.addEventListener('scroll', pageSCroll)
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    // console.log('我是页面滚动距离', scrollTop)
    //如果手动关闭广告则不进此判断
  }, 200)





//初始化top列表数据
const homeData = ref<any>([])
//获取列表数据
const getList = async () => {
    try {
        let result = await homeApi.getHomeCateList()
        //赋值
        homeData.value = result.data
        // console.log('测试能拿数据不', result)
    } catch (error) {
        console.log(error)
    }
}
const topNavlist = ref([])
//首页列表数据
const getNavList = async () => {
    try {
        let result = await homeApi.getNavList()
      
        topNavlist.value = result.categoryL1List
    } catch (error) {
        console.log(error)
    }
}
//单击轮播图跳转到detail页面
const goDetail = () => {
    router.push({ path: '/detail' })
}

onMounted(() => {
    getNavList()
    getList()
})
//策略描述列表
const policyDescList = computed(() => {
    return homeData.value.policyDescList
})
//定义轮播图数据
const focusList = computed(() => {
    return homeData.value.focusList
})

</script>

<style scoped lang="scss">
//开启固定定位
.fix {
    position: fixed;
    top: 0;
}

.flex {
    display: flex;
}

.top_nav {
    flex-direction: column;

}

//广告区域
.top_symbal {
    width: 375px;
    height: 52px;
    background: black;
}

.top_input {
    width: 100%;
    height: 44px;
    background-color: #fff;
    align-items: center;
    justify-content: center;
}

//top搜索提示--精灵图
.top_search {
    width: 69px;
    height: 20px;
    background-image: url(@/assets/yanxuan.png);
    vertical-align: middle;
    background-size: 4.3rem 4.3rem;
    background-position: 3rem 4.8rem;
    display: inline-block;
    margin-right: 0.2rem;

}

.input_box {
    width: 266px;
    height: 28px;
    background-color: #ededed;
    font-size: 14px;
    border-radius: 5px;
    text-align: center;
    line-height: 28px;
}

//轮播图盒子位置
.top_swiper {
    width: 375px;
    height: 185px;

    img {
        width: 100%;
        height: 100%;
    }
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;

    text-align: center;
}

.content_three {
    width: 375px;
    height: 36px;
    margin-top: 5px;

    img {
        width: 16px;
        height: 16px;
        line-height: 36px;
    }

    ul {
        font-size: 12px;
        line-height: 36px;
        text-align: center;
        justify-content: space-around;
    }


}
</style>